<template>
    <div
        class="full-screen-container bg-gradient-to-br from-sky-50 to-indigo-50 min-h-screen flex items-center justify-center p-6">
        <div class="w-[1200px] bg-white/95 backdrop-blur-xl rounded-2xl shadow-2xl flex overflow-hidden">
            <div
                class="w-[45%] bg-gradient-to-br from-sky-100 via-blue-50 to-indigo-100 p-16 flex flex-col justify-between relative">
                <div class="relative z-10">
                    <h1 class="text-4xl font-bold mb-6 text-gray-800 leading-tight mt-14">智能人才成长画像平台</h1>
                    <p class="text-lg text-gray-600 leading-relaxed mb-8">
                        基于 AI 驱动的人才画像系统，<br />
                        助力企业挖掘人才潜力，实现精准人才管理。
                    </p>
                    <div class="flex flex-wrap gap-4 mb-8">
                        <div class="bg-white/80 backdrop-blur-sm px-4 py-3 rounded-lg flex items-center space-x-2">
                            <i class="iconfont icon-shujufenxi" style="font-size: 2rem; color: #3B82F6;"></i>
                            <span class="text-sm text-gray-700">数据分析</span>
                        </div>
                        <div class="bg-white/80 backdrop-blur-sm px-4 py-3 rounded-lg flex items-center space-x-2">
                            <i class="iconfont icon-rencaiguanli" style="font-size: 1.5rem; color: #3B82F6;"></i>
                            <span class="text-sm text-gray-700">人才管理</span>
                        </div>
                        <div class="bg-white/80 backdrop-blur-sm px-4 py-3 rounded-lg flex items-center space-x-2">
                            <i class="iconfont icon-jiqiren_o" style="font-size: 2rem; color: #3B82F6;"></i>
                            <span class="text-sm text-gray-700">AI 赋能</span>
                        </div>
                    </div>
                </div>
                <img :src="illustrationUrl" alt="人才画像插图"
                    class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-[90%] opacity-90" />
            </div>

            <div class="w-[55%] p-16">
                <div class="max-w-md mx-auto">
                    <div class="mb-10">
                        <h2 class="text-2xl font-bold text-gray-800 mb-3">登录系统</h2>
                        <p class="text-gray-500">请使用您的账号密码登录系统</p>
                    </div>

                    <form class="space-y-6" @submit.prevent="handleSubmit">
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700">账号</label>
                            <div class="relative">
                                <i class="iconfont icon-rencaiguanli absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"
                                    style="font-size: 1rem;"></i>
                                <input type="text" v-model="formData.account"
                                    class="w-full pl-11 pr-4 py-3 bg-gray-50 border border-gray-200 rounded-button focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition-colors"
                                    placeholder="请输入您的账号" required />
                            </div>
                        </div>

                        <div class="space-y-2">
                            <div class="flex justify-between items-center">
                                <label class="block text-sm font-medium text-gray-700">密码</label>
                                <a href="#" class="text-sm text-blue-600 hover:text-blue-700 transition-colors"
                                    @click.prevent="goToResetPassword">
                                    忘记密码？
                                </a>
                            </div>
                            <div class="relative">
                                <i class="iconfont icon-mima absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"
                                    style="font-size: 1rem;"></i>
                                <input type="password" v-model="formData.password"
                                    class="w-full pl-11 pr-4 py-3 bg-gray-50 border border-gray-200 rounded-button focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition-colors"
                                    placeholder="请输入您的密码" required />
                            </div>
                        </div>

                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700">验证码</label>
                            <div class="flex items-center space-x-4">
                                <div class="flex-1">
                                    <!-- 使用 prefix 插槽将图标放入输入框内部 -->
                                    <el-input type="text" placeholder="输入验证码" v-model="verifyCode"
                                        style="margin-top: 1.25rem; width: 21rem; height: 3rem; font-size: 1rem;">
                                        <template #prefix>
                                            <i class="iconfont icon-yanzhengma text-gray-400"
                                                style="font-size: 1.5rem; margin-right: 0.5rem;"></i>
                                        </template>
                                    </el-input>
                                </div>
                                <!-- 验证码图片 -->
                                <img :src="verifySrc" alt="图片无法加载" @click="changeVerify()" class="cursor-pointer"
                                    style="width: 6rem; height: 3rem; object-fit: contain; margin-top: 1rem;">
                            </div>
                        </div>

                        <button type="submit"
                            class="w-full bg-gradient-to-r from-blue-500 via-blue-600 to-indigo-600 text-white py-3 px-4 rounded-button hover:opacity-90 transition-all transform hover:scale-[1.02] active:scale-[0.98] font-medium text-base whitespace-nowrap !rounded-button flex items-center justify-center space-x-2">
                            <i class="iconfont icon-denglu" style="font-size: 1rem;"></i>
                            <span>登录系统</span>
                        </button>
                    </form>

                    <div class="mt-8 text-center space-y-4">
                        <a href="#"
                            class="text-blue-600 hover:text-blue-700 text-sm font-medium flex items-center justify-center space-x-1"
                            @click.prevent="goToRegister">
                            <span>没有账号？</span>
                            <span class="font-semibold">立即注册</span>
                            <i class="iconfont icon-youjiantou" style="font-size: 1rem;"></i>
                        </a>

                        <div class="flex items-center justify-center space-x-4 text-gray-400 text-sm">
                            <a href="#" class="hover:text-gray-600 transition-colors">隐私政策</a>
                            <span>|</span>
                            <a href="#" class="hover:text-gray-600 transition-colors">服务条款</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'; // 引入 element-plus 的消息提示组件
import { setToken, getToken } from '../utils/auth.js'
import { userLogin, userRegister, findPassword } from '../api/user.js';
import report from './student/qualityReport.vue'
import {userStore} from '../stores/counter.js'

const router = useRouter();
const store = useStore();
// 图片URL
const illustrationUrl = 'https://ai-public.mastergo.com/ai/img_res/fa9ae7744f0d07f96a1cc2d16fb85468.jpg';
const captchaUrl = 'https://ai-public.mastergo.com/ai/img_res/151d5e9afe17dc179facbe2e2b2e5f08.jpg';

let verifyCode = ref('')//登录验证码
// 表单数据
const formData = ref({
    account: '',
    password: '',
});

// 加载状态
const isLoading = ref(false);

// 登录按钮
const onSubmit = async () => {
    userLogin(formData.value.account, formData.value.password, verifyCode.value)
        .then((response) => {
            console.log("login:",response);
            setToken(response.token);
            store.state.prehaslogin = true;
            localStorage.setItem("prehaslogin", true);
            localStorage.setItem("userInfo", JSON.stringify(response.userInfo));

            // 定义权限类型与路由的映射关系
            const permissionMap = {
                "学生端": { route: "/report" },
                "招聘方端": { route: "/Boss" },
                "教师端": { route: "/teacher" },
                "管理员端": { route: "/system" },
                "超级管理员端": { route: "/system" }
            };

            // 获取权限类型
            const permissionType = response.userInfo.permissionType;
            // 根据权限类型跳转路由
            if (permissionMap[permissionType]) {
                const firstLoginState = response.userInfo.firstLogin;
                if (permissionType=="学生端"&&firstLoginState == 0) {
                    router.push("/interestedPosition");
                    return;
                }
                router.push({ path: permissionMap[permissionType].route });
            } else {
                console.error("未知的权限类型:", permissionType);
                router.push({ path: '/error' }); // 跳转到错误页面或默认页面
            }
        })
        .catch((error) => {
            console.error("登录失败:", error);
        });
};

// 表单提交
const handleSubmit = () => {
    onSubmit();
};

//验证码
const verifySrc = ref("http://localhost:8081/code/verify");
function changeVerify() {
    verifySrc.value = "http://localhost:8081/code/verify?" + new Date().getTime()

}

// 跳转到注册页面
const goToRegister = () => {
    router.push('/register');
};

// 跳转到找回密码页面
const goToResetPassword = () => {
    router.push('/forgetPassword');
};

const toHome = () => {
    router.push('/report');
};
</script>

<style scoped>
.bg-gradient-to-br {
    background-size: 200% 200%;
    animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

input {
    outline: none;
}

/* 设置页面容器宽度为 100vw 和高度为 100vh，保证页面大小与浏览器同步 */
.full-screen-container {
    width: 100vw;
    height: 100vh;
    background-color: #3a88bc;
    margin: 0;
    padding: 0;
}

/* 如果有特定的样式应用于 .body，可以考虑调整 */
.body {
    width: 100%;
}
</style>
